<template>
  <div class="ldq-img-box">
    <input
      type="file"
      accept="image/*"
      ref="ldqUpfile"
      id="xdaTanFileImg"
      @change="doUpload($event); $emit('input', file)" />
    <img class="upImg" :src="imgUrl" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      imgUrl: '',
      file: ''
    }
  },
  props: {
    url: {
      type: String,
      default: ''
    }
  },
  created () {
    this.initParams()
  },
  methods: {
    initParams () {
      this.imgUrl = '/public/img/up.jpg'
      this.file = ''
    },
    getObjectURL (file) {
      var url = null
      if (window.createObjectURL!=undefined) { // basic
        url = window.createObjectURL(file)
      } else if (window.URL!=undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file)
      } else if (window.webkitURL!=undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(file)
      }
      return url
    },
    doUpload (e) {
      var img = document.querySelector(".upImg")
      this.file = e.target.files[0]
      this.imgUrl = this.getObjectURL(e.target.files[0])
    },
  },
  watch: {
    url (val) {
      if (!val) {
        this.imgUrl = '/public/img/up.jpg'
        return false
      }
      this.imgUrl = this.url
    }
  }
}
</script>

<style lang='stylus' scoped>
  .ldq-img-box
    width 140px
    height 140px
    border 1px dashed #ccc
    margin-left 50%
    transform translateX(-50%)
    position relative
    border-radius 5px
    box-sizing border-box
    // &:hover
    //   border 1px dashed #409eff !important
    input
      width 100%
      height 100%
      opacity 0
      position absolute
      top 0
      left 0
      z-index 2
      cursor pointer
    img
      width 100%
      height 100%
      position absolute
      top 0
      left 0
      z-index 1
      cursor pointer
</style>
